<template>
  <el-dialog title="用户信息编辑" :visible.sync="visible" width="30%">
    <el-form :model="form" ref="form">
      <el-form-item label="用户名" :label-width="formLabelWidth" prop="name" :rules="[rules,rulesLength20]">
        <el-input v-model="form.name" auto-complete="off" placeholder="请输入用户名" clearable :disabled="isedit"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="password" :rules="rules1" v-if="!isedit">
        <el-input v-model="form.password" auto-complete="off" placeholder="请输入六位及以上数字和字母的组合" clearable type="password"></el-input>
      </el-form-item>
      <el-form-item label="角色名" :label-width="formLabelWidth" prop="roleId" :rules="rules2">
        <app-selector :url="charactorUrl" :isrequired="true" :defaultOption="'选择角色'"
                      v-model="form.roleId" :props="{name:'roleName',id:'id'}" :is-public-api="true"></app-selector>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm('form')" v-if="!isedit">确 定</el-button>
      <el-button type="primary" @click="save('form')" v-if="isedit">保存</el-button>
    </div>
  </el-dialog>

</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  import AppSelector from '@/components/AppSelector'
  import ValidataRules from '@/utils/validateRules'

  export default {
    name:'AddCategoryDialog',
    components:{
      'app-selector':AppSelector
    },
    props: {
      show: {type: Boolean, default: false},
      isedit:{type:Boolean,default:false},
      dataItem:{type:Object}
    },
    data() {
      return {
        formLabelWidth: '80px',
        form: {
          name: '',
          password:'',
          roleId:null,
        },
        charactorUrl:'/backend/common/roleList.do',
        rules: {type:'string',required: true, message: '不能为空', trigger: 'blur'},
        rules2: {required: true, message: '不能为空', trigger: 'change'},
        rules1: [
          {type:'string',required: true, message: '不能为空', trigger: 'blur'},
          {pattern:/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/,min:6, trigger: 'blur',message: '请输入六位及以上数字和字母的组合'}
        ],
        rulesLength20: { validator: ValidataRules.limitMaxLength(20), trigger: 'blur' }
      }
    },
    methods: {
      close() {
        this.$emit('update:show', false)
      },
      //操作
      confirm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            ApiClient.post('/backend/users/add.do',this.form).then(data => {
              this.$emit('success')
              this.close()
            }).catch(data =>{
            })
          } else {
            return false;
          }
        });
      },
      save(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            ApiClient.put('/backend/users/update.do',{id:this.form.id,roleId:this.form.roleId,name:this.form.name}).then(data => {
              this.$emit('success')
              this.close()
            }).catch(data =>{
            })
          } else {
            return false;
          }
        });
      }
    },
    computed: {
      visible: {
        get: function () {
          return this.show == false ? false : true
        },
        set: function () {
          this.$emit('update:show', false)
        }
      }
    },
    mounted() {
      if(this.isedit){
        this.form.id = this.dataItem.id;
        this.form.name = this.dataItem.name;
        this.form.roleId = this.dataItem.roleId;

      }
    }
  }
</script>
<style>
  .el-dialog__header{
    text-align: center;
  }
  .el-form-item__content {
    text-align: left;
  }
</style>
